<template>
  <view class="container">
    <view class="pd30 ft36">
      <view class="radius-16 bgw flex pd20 mg16-y">
        <view class="mgr50 flex1">默认地址</view>
        <view style="flex:3">
          <switch style="transform:scale(0.7)" @change="switch2Change" />
        </view>
      </view>
      <view class="radius-16 bgw flex pd20 mg16-y">
        <view class="mgr50 flex1">收件人</view>
        <input class="txt flex3" type="text" placeholder="请输入收件人" v-model="userName">
      </view>
      <view class="radius-16 bgw flex pd20 mg16-y">
        <view class="mgr50 flex1">手机号码</view>
        <input class="txt flex3" type="text" placeholder="请输入手机号码" v-model="userPhone">
      </view>
      <view class="radius-16 bgw flex pd20 mg16-y" @click="showBox">
        <view class="mgr50 flex1">所在地区</view>
        <input class="txt flex3" v-model="pca" readonly="true" type="text" placeholder="请选择所在地区" >
      </view>
      <view class="radius-16 bgw flex pd20 mg16-y">
        <textarea :focus='true' class="situation flex1" v-model="detailAddress" placeholder="请输入详细地址"></textarea>
      </view>
    </view>
    <button @click="handleClick" :disabled='disabled' class="submit dlc-bg-primary mg50-x ftw">提交</button>
    <!-- 省市区弹窗 -->
    <van-popup :show="areaShow" position="bottom" :overlay="true">
        <van-area :area-list="areaList" @confirm="onSelect" @cancel="areaShow = false" />
    </van-popup>
  </view>
</template>

<script>
  import areaList from '@/utils/area';
  import store from '@/store';
  import {addAddress} from '@/api'
  import { validatePhone } from '@/utils/validate'
  export default {
    data() {
      return {
        areaList: areaList,
        areaShow: false,
        province: '',
        city: '',
        area: '',
        provinceId: '',
        cityId: '',
        areaId: '',
        isDefault:false,
        userName:'',
        userPhone:'',
        detailAddress:'',
        pca:''
      }
    },
    methods: {
      switch2Change (e) {
        this.isDefault = e.target.value
      },
      onChange(event){
        console.log(event)
        this.isDefault = event.detail.value
      },
      showBox(){
        this.areaShow = true
      },
      onSelect(orignalValue) {
        console.log("orignalValue----",orignalValue)
        let value = orignalValue.detail.values
        this.provinceId = value[0].code;
        this.cityId = value[1].code;
        this.areaId = value[2].code;
        this.province = value[0].name;
        this.city = value[1].name;
        this.area = value[2].name;
        this.pca = value[0].name + ' ' +  value[1].name + ' ' + value[2].name
        this.areaShow = false;
      },
      async handleClick(){
        if (!this.userName) {
          uni.showToast({
            title: '请输入收件人',
            icon: 'none'
          })
          return
        }
        if (!this.userPhone) {
          uni.showToast({
            title: '请输入手机号码',
            icon: 'none'
          })
          return
        }
        if (!validatePhone(this.userPhone)) {
          uni.showToast({
            title: '请填写正确的手机号码',
            icon: 'none'
          })
          return
        }
        if (!this.area) {
          uni.showToast({
            title: '请输入所在地区',
            icon: 'none'
          })
          return
        }
        if (!this.detailAddress) {
          uni.showToast({
            title: '请输入详细地址',
            icon: 'none'
          })
          return
        }
        this.disabled = true
        let query = {
          isDefault: this.isDefault ? 1 : 2,
          userName: this.userName	,
          userPhone: this.userPhone,
          province: this.province,
          city: this.city,
          area: this.area,
          provinceId: this.provinceId,
          cityId: this.cityId,
          areaId: this.areaId,
          detailAddress: this.detailAddress,
        }
        try {
          const {data} = await addAddress(query)
          if (data.code === 1){
            uni.showToast({
              title: '提交成功',
              icon: 'none'
            })
            uni.setStorageSync("isBack", 1);
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 800)
          } else {
            this.disabled = false
          }
        } catch (error) {
          this.disabled = false
        }
      }
    },
    onReady() {
    },
    onLoad(query) {
    },
  }
</script>

<style lang="stylus" scoped>
  .container {
    font-size 28upx
    min-height: 100vh;
    min-width: 100vw;
    background: #f6f6f6
  }
  .situation {
    height: 50px;
    margin-bottom 20upx
  }
  .submit {
    border-radius 24upx
  }
  .txt{
    color #888
  }
  
</style>
